<template>
  <div class="play-video">
    <div class="wrap">
      <div class="info">
        <h1 class="title1">{{values.videoName}}</h1>
        <div class="playInfo">
          {{values.playNumber}}播放&nbsp;&nbsp;&nbsp;{{values.createTime}}
        </div>
        <div class="author">
          <p>{{authorValues.username}}</p>
          <img :src="getUrl(authorValues.avatar)">
        </div>
      </div>
      <video-play class="video-play" :url="values.url" :videoId="values.id"/>
      <comment class="video-comment" :videoId="values.id"/>
    </div>
  </div>
</template>

<script>
import {getVideoById,getConsumerOfId} from '../api/index'
import {mixin} from '../mixins/index'
import VideoPlay from '../components/VideoPlay.vue'
import Comment from '../components/Comment.vue'
export default {
  mixins:[mixin],
  name:'play-video',
  data(){
    return {
      values:[],
      authorValues:[],
    }
  },
  components: {VideoPlay,Comment},
  created(){
    this.getData(this.$route.query.id)
  },
  methods:{
    //根据视频id获取详细信息
    getData(id){
      getVideoById(id)
      .then(res =>{
        this.values = res
        this.getAuthor(res.authorId)
      })
    },
    //根据作者id获取详细信息
    getAuthor(authorId){
      getConsumerOfId(authorId)
        .then(res =>{
          this.authorValues = res
        })
    }
  }
}
</script>

<style>
@import '../assets/css/playVideo.css';
</style>